<template>
	<view class="jobCard mL15 mR15" v-for="(item,i) in list" :key="item.id" @click="jumpJobDetail(item)">
		<view class="flex  alg-center jst-between">
			<view class="w75 flex alg-center">
				<text class="jobTitle" :class="xf.getItemClass(item)">{{item.oddJobName}}</text>
				<u-tag v-if="item.izUrgent==1" text="急聘" bg-color="#fff" class="jpTag" :color="'#FF0000'" :border-color="'#FF0000'"
					 />
				<u-tag v-if="item.recruitmentCarefree&&item.recruitmentCarefree.indexOf('10')>=0" text="用工无忧" bg-color="#EAF4FE" class="zgTag" :color="'#3291F8'" :border-color="'#EAF4FE'"
					 />	
				
			</view>
			<view class="jobMoney txt-ellipsis  font20 u-red">{{item.salary}}<text class="jobUint font13">元</text>
			</view>
		</view>
		<view class="flex alg-center flex-wrap">
			<!-- <view class="jobStatus  u-red font13" v-if="item.izUrgent==1">急聘</view> -->
			<view class="jobTag u-blue  font13 mR5 " v-if="item.recruitmentCarefree==1">用工无忧</view>
			<view class="jobTime">{{item.jobBeginDatetime}}-{{item.jobEndDatetime}}</view>
			<view class="jobTime">{{item.salaryPaymentText}}</view>
			<view class="jobTime">招{{item.oddJobUseNum}}人</view>
		</view>
		<view class="flex alg-center jst-between mT10">
			<view class="jobPos flex alg-center w70">
				<image class="posImg" :src="resources.posIcon" mode=""></image>
				<text class="posTxt mL5 txt-ellipsis">{{item.hopeWorkAddress}}</text>
			</view>
			<view class="font13 u-6" v-show="isDistance">{{item.distance}}</view>
		</view>
		<view class="flex jst-between alg-center mT10">
			<view class="flex alg-center" @click.stop="jumpPersonInfo(item)">
				<u-image :width="48" :height="48" :borderRadius="10" v-if="item.userprofile" class="companyImg"
					:src="xf.getImgUrl(item.userprofile)" mode=""></u-image>
				<image v-else class="companyImg" :src="resources.defaultHeader" mode=""></image>
				<text class="companyName ellipse"
					style="max-width: 300rpx;">{{item.userOrComName?item.userOrComName:item.comOrUserName}}</text>
				<block v-if="item.comizAuthentication||item.comOrUserizAuthentication">
					<image v-if="item.oddReleaseType==1" :src="resources.qyrzLogo" class="rzImg" mode=""></image>
					<image v-else :src="resources.grrzLogo" class="rzImg" mode=""></image>
				</block>

			</view>
			<view class="bmBtn">立即报名</view>
		</view>

	</view>

</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			},
			isDistance: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {

			}
		},
		methods: {

			jumpPersonInfo(item) {
				let id = item.oddReleaseType == 1 ? item.comId : item.xfOddUserId
				uni.navigateTo({
					url: `/pages/common/personOrcompnayInfo/index?isPerson=${item.oddReleaseType}&id=${id}`
				})
			},
			jumpJobDetail(item) {
				let id = item.infoId ? item.infoId : item.id;
				uni.navigateTo({
					url: `/pages/companyPage/subpackge/job/grabDetail/index?id=${id}`,
				})

			}

		}
	}
</script>

<style lang="scss" scoped>
	.jobCard {
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;



		.jobName {
			width: 75%;
		}

		.jobStatus {
			border: 2rpx solid #FF0000;
			border-radius: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 10rpx;
			margin-right: 10rpx;
			margin-top: 16rpx;
		}

		.jobTag {
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-top: 16rpx;
		}

		.jobMoney {
			word-break: keep-all;
		}

		.jobTime {
			color: #8D8D8D;
			font-size: 26rpx;
			margin-right: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 20rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-top: 16rpx;
		}

		.posImg {
			width: 32rpx;
			height: 32rpx;
		}

		.posTxt {
			width: calc(100% - 42rpx);
			font-weight: 400;
			font-size: 26rpx;
			color: #8D8D8D;
		}

		.companyImg {
			width: 48rpx;
			height: 48rpx;
		}

		.rzImg {
			width: 24rpx;
			height: 24rpx;
		}

		.companyName {
			font-weight: 500;
			font-size: 30rpx;
			color: #333;
			margin-right: 10rpx;
			margin-left: 10rpx;
		}
	}
</style>